<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="author" content="PIXINVENT">
  <title>自助售货管理后台</title>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>

<body>
  <div class="content-wrapper">
    <div class="content-header ">
      <div class="content-header-left mb-2">
        <h3 class="content-header-title mb-0">商品列表</h3>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <div class="card-body">
          <div class="searchbox">
            <form class="form-inline">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="请填写商品名称" id="productName">
              </div>
              <div class="form-group">
                <select class="form-control" id="category" id="category">
                  <option value="">请选择商品类别</option>
                </select>
              </div>
              <div class="form-group">
                <select class="form-control" id="supplier" id="supplier">
                  <option value="">请选择供应商</option>
                </select>
              </div>

              <div class="form-group">
                <button type="button" class="btn btn-primary" id="search">查询</button>
              </div>

            </form>
          </div>
          <div class="funcbtn clearfix">
            <div class="pull-left"><a class="btn btn-info" href="编辑商品信息.html"> 添加商品</a></div>
          </div>
          <div class="tablebox1">
            <table class="table">
              <thead>
                <tr>
                  <th>商品图片</th>
                  <th>商品ID</th>
                  <th>商品名称</th>
                  <th>商品品牌</th>
                  <th>建议售价</th>
                  <th>采购价</th>
                  <th>商品类别</th>
                  <th>供应商</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="productList">

              </tbody>
            </table>

            <div class="page clearfix">
              <div id="pageTotal"></div>
              <div class="pull-right">

                <nav aria-label="...">
                  <ul class="pagination" id="pageButton">
                    <!-- 分页按钮 -->
                  </ul>
                </nav>
                <select class="form-control form-control-sm" style="width: 100px;" id="pageSizeSelect">
                  <option value="5">5条每页</option>
                  <option value="10">10条每页</option>
                  <option value="20">20条每页</option>
                </select>
              </div>
              <div class="d-flex align-items-center">
                <span class="me-2">跳至</span>
                <input type="text" class="form-control form-control-sm" style="width: 50px;" value="1">
                <span class="ms-2">页</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
  <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
  <script src="app-assets/js/app.js" type="text/javascript"></script>
  <script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
  <script>
    let productQueryData = {
      productName: "",//商品名称
      categoryId: "",//类别ID
      supplierId: "",//供应商ID
      pageNum: 1, //当前页
      pageSize: 5 //每页显示的条数
    };
    //初始化列表
    $(document).ready(function () {
      //查询商品列表
      selectProductList();
      //查询供应商和类别
      selectCategoryAndSupplier();
    });

    //查询分页查询所有商品
    function selectProductList() {
      $.ajax({
        type: "POST",
        url: "http://localhost:25080/products/list",
        data: productQueryData,
        dataType: "json",

        success: function (data) {
          //渲染数据
          render(data);
          pageButton(data);
        }
      })
    }
    //搜索
    $("#search").click(function () {
      productQueryData.productName = $("#productName").val();
      productQueryData.categoryId = $("#category").val();
      productQueryData.supplierId = $("#supplier").val();
      productQueryData.pageNum = 1;
      selectProductList();
    });
    //数据渲染
    function render(data) {
      console.log(data);
      if (data.code == 200) {
        $("#productList").empty();
        data.data.list.forEach(item => {
          var tr = "<tr>" +
            "<td><img src='" + item.productImage + "' width='50' height='50'/></td>" +
            "<td>" + item.productId + "</td>" +
            "<td>" + item.productName + "</td>" +
            "<td>" + item.brand + "</td>" +
            "<td>" + item.price + "</td>" +
            "<td>" + item.purchasePrice + "</td>" +
            "<td>" + item.categoryName + "</td>" +
            "<td>" + item.supplierName + "</td>" +
            "<td>" + item.createTime + "</td>" +
            "<td><a href='编辑商品信息.html?productId=" + item.productId + "'>编辑</a> | <a href='#'>删除</a></td>" +
            "</tr>";
          $("#productList").append(tr);
        });
        productQueryData.pageTotal = data.data.total;
      }
    }
    //渲染分页按钮
    function pageButton(data) {
      console.log(data);
      if (data.code == 200) {
        $("#pageButton").empty();
        let button = `<li class="${data.data.current === 1 ? "disabled" : ""}"><a href="#" aria-label="Previous" onclick="previousPage()"><span aria-hidden="true">«</span></a></li>`
        $("#pageButton").append(button);
        for (let i = 1; i <= data.data.pages; i++) {
          let button = `<li ${data.data.current === i ? 'class="active"' : ''}><a href="#" onclick="pageButtonClick(${i})">${i}</a></li>`
          $("#pageButton").append(button);
        }

        button = `<li class="${data.data.current === data.data.pages ? "disabled" : ""}"><a href="#" aria-label="Next" id="nextPage" onclick="nextPage()"><span aria-hidden="true" >»</span></a></li>`
        $("#pageButton").append(button);
        $("#pageTotal").text(`共 ${data.data.total} 条记录 第 ${data.data.pageNum} / ${data.data.pages} 页`);
        productQueryData.pageTotal = data.data.pages;
      }
    }

    //点击按钮
    function pageButtonClick(pageNum) {
      productQueryData.pageNum = pageNum;
      selectProductList();
    }
    //点击上一页
    function previousPage() {
      if (productQueryData.pageNum <= 1) {
        return;
      }
      if (productQueryData.pageNum > 1) {
        productQueryData.pageNum--;
        selectProductList();

      }
    }
    //点击下一页
    function nextPage() {

      if (productQueryData.pageNum < productQueryData.pageTotal) {
        productQueryData.pageNum++;
        selectProductList();
      }

    }

    //每页显示多少条
    $("#pageSizeSelect").change(function () {
      productQueryData.pageSize = $(this).val();
      productQueryData.pageNum = 1; //重置为第一页
      selectProductList();
    });

    //跳至某页
    $("input[type='text']").on('keypress', function (e) {
      if (e.which == 13) { // Enter key pressed
        let page = parseInt($(this).val()); //获取这个对象的值
        if (!isNaN(page) && page >= 1 && page <= productQueryData.pageTotal) {
          productQueryData.pageNum = page;
          selectProductList();
        } else {
          alert("请输入正确的页码");
        }
      }
    });



    //查询供应商和类别
    function selectCategoryAndSupplier() {
      selectCategory();
      selectSupplier();
    }
    //查询类别
    function selectCategory() {
      $.ajax({
        type: "POST",
        url: "http://localhost:25080/categories/getCategoryList",
        dataType: "json",
        success: function (data) {
          console.log(data);
          if (data.code == 200) {
            var category = data.data;
            for (var i = 0; i < category.length; i++) {
              var option = "<option value='" + category[i].categoryId + "'>" + category[i].categoryName + "</option>";
              $("#category").append(option);
            }
          }
        }
      })
    }

    //查询供应商
    function selectSupplier() {
      $.ajax({
        type: "POST",
        url: "http://localhost:25080/suppliers/getSupplierList",
        dataType: "json",
        success: function (data) {
          console.log(data);
          if (data.code == 200) {
            var supplier = data.data;
            for (var i = 0; i < supplier.length; i++) {
              var option = "<option value='" + supplier[i].supplierId + "'>" + supplier[i].supplierName + "</option>";
              $("#supplier").append(option);
            }
          }

        }
      })
    }

  </script>

</body>

</html>